<!-- 图标选择器 -->
<script setup>
import {ref, computed, watch} from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

watch(() => props.visible, (newValue) => {
    dialogVisible.value = newValue
})

const icons = Object.values(ElementPlusIconsVue)
const search = ref('')
const dialogVisible = ref(false)

// 计算属性用于过滤图标
const filteredIcons = computed(() => {
  if (!search.value) {
    return icons;
  }
  return icons.filter(icon =>
      icon.name.toLowerCase().includes(search.value.toLowerCase())
  );
});

const emit = defineEmits(['select', 'update:visible']);

// 点击图标时触发
const selectIcon = (icon) => {
  emit('select', icon);
};

//关闭清理事件
const dialogClose = () => {
  search.value = ''
  emit('update:visible', false)
}
</script>

<template>
  <el-dialog width="400" title="图标选择器" :close-on-click-modal="false" v-model="dialogVisible" @close="dialogClose">
    <div class="icon-picker">
      <el-input
          v-model="search"
          placeholder="搜索图标"
          prefix-icon="search"
          clearable
      />
      <div class="icons-container">
        <el-scrollbar height="320px">
          <div class="icon-list">
            <div
                v-for="(icon, index) in filteredIcons"
                :key="index"
                class="icon-item"
                @click="selectIcon(icon)"
            >
              <component :is="icon" style="width: 28px; height: 28px" />
              {{ icon.name }}
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </el-dialog>

</template>

<style scoped lang="scss">
.icon-picker {
  width: 100%;

  .icons-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;

    .icon-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .icon-item {
        width: 86px;
        height: 86px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        cursor: pointer;
        transition: all .3s;

        &:hover {
          background-color: #f0f0f0;
        }
      }
    }
  }
}
</style>
